<template>
  <Dialog v-model="show" @confirm="handleSubmit" @close="close" :title="$t('memberLists.editDia.新增消息')" width="1000px">
    <el-form :model="formData" label-width="120px" ref="formRef" :rules="rules">
      <el-form-item :label="$t('memberLists.editDia.消息标题')" prop="title">
        <el-input v-model="formData.title" />
      </el-form-item>
      <el-form-item :label="$t('memberLists.editDia.消息描述')" prop="description">
        <el-input v-model="formData.description" />
      </el-form-item>
      <el-form-item :label="$t('memberLists.editDia.图片')" prop="image">
        <UploadPictures />
      </el-form-item>
      <el-form-item :label="$t('memberLists.editDia.已阅读用户数量')" prop="readCount">
        <el-input v-model="formData.readCount" />
      </el-form-item>
    </el-form>
  </Dialog>
</template>
<script setup>
import { ref, watch, computed } from "vue";
import Dialog from "@/components/dialog.vue";
import UploadPictures from "@/components/uploadPictures.vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const show = defineModel();
const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
});

watch(show, (val) => {
    if (val) {
        props.data && (formData.value = props.data);
    }
});

const formData = ref({
    title: "",
    description: "",
    image: "",
    readCount: "",
});

const rules = computed(() => ({
    title: [{ required: true, message: t('memberLists.editDia.请输入消息标题'), trigger: "blur" }],
    description: [{ required: true, message: t('memberLists.editDia.请输入消息描述'), trigger: "blur" }],
    image: [{ required: true, message: t('memberLists.editDia.请输入图片'), trigger: "blur" }],
    readCount: [
        { required: true, message: t('memberLists.editDia.请输入已阅读用户数量'), trigger: "blur" },
    ],
}));

const formRef = ref();
const handleSubmit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            console.log("submit!");
        } else {
            console.log("error submit!");
        }
    });
};

const close = () => {
    formData.value.title = "";
    formData.value.description = "";
    formData.value.image = "";
    formData.value.readCount = "";
    show.value = false;
};
</script>
